<template>
  <div class="table-show-cont" :style="'width:'+(newWidth?newWidth:'')+';'">
    <p class="table-show-title">{{title}}</p>
    <table :class="['table-show-table', splitColor?'table-show-split-color':'']">
      <thead class="table-show-th">
        <tr class="table-show-th-tr">
          <td class="table-show-th-td table-show-th-td0" v-if="columnShow.includes('排名')">排名</td>
          <td class="table-show-th-td table-show-th-td1" v-if="columnShow.includes('类别')">类别</td>
          <td class="table-show-th-td table-show-th-td2" v-if="columnShow.includes('书名')">书名</td>
          <td class="table-show-th-td table-show-th-td3" v-if="columnShow.includes('最新章节')">最新章节</td>
          <td class="table-show-th-td table-show-th-td4" v-if="columnShow.includes('作者')">作者</td>
          <td class="table-show-th-td table-show-th-td5" v-if="columnShow.includes('更新时间')">更新时间</td>
          <td class="table-show-th-td table-show-th-td6" v-if="columnShow.includes('字数')">字数</td>
          <td class="table-show-th-td table-show-th-td7" v-if="columnShow.includes('章节数')">章节数</td>
        </tr>
      </thead>
      <tbody class="table-show-tb">
        <tr class="table-show-tb-tr" v-for="(item, i) in showList" :key="item.id">
          <td class="table-show-tb-td table-show-tb-td0" v-if="columnShow.includes('排名')"><span :class="['table-show-tb-index', i<3?('table-show-tb-index'+i):'']">{{i+1}}</span></td>
          <td class="table-show-tb-td table-show-tb-td1" v-if="columnShow.includes('类别')">[{{item.catName}}]</td>
          <td class="table-show-tb-td table-show-tb-td2" v-if="columnShow.includes('书名')"><router-link :to="'/index/bookDetail?id='+item.id" :target="global.goBookDetailType">{{item.bookName}}</router-link></td>
          <td class="table-show-tb-td table-show-tb-td3" v-if="columnShow.includes('最新章节')"><router-link :to="'/index/bookDetail?id='+item.id" :target="global.goBookDetailType">{{item.lastIndexName}}</router-link></td>
          <td class="table-show-tb-td table-show-tb-td4" v-if="columnShow.includes('作者')">{{item.authorName}}</td>
          <td class="table-show-tb-td table-show-tb-td5" v-if="columnShow.includes('更新时间')">{{item.lastIndexUpdateTime}}</td>
          <td class="table-show-tb-td table-show-tb-td6" v-if="columnShow.includes('字数')">{{item.wordCount | convertWan}}万</td>
          <td class="table-show-tb-td table-show-tb-td7" v-if="columnShow.includes('章节数')">{{item.indexCount}}章</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  props:{
    title:String,
    showList:Array,
    columnShow:Array,
    newWidth:String,
    splitColor:{
      type:Boolean,
      default:false
    }
  }
}
</script>

<style lang='scss' scoped>
.table-show-cont {
  width: 100%;
  display: inline-block;
  margin-right: 10px;
  .table-show-title {
    height: 40px;
    margin: 0;
    font-size: 20px;
    font-weight: bold;
    color: #333333;
  }
  .table-show-split-color{
    thead tr:nth-child(odd){
      background: #F9F9F9;
    }
    tbody tr:nth-child(even){
      background: #F9F9F9;
    }
  }
  .table-show-table {
    width: 100%;
    table-layout:fixed;
    border-collapse:collapse;
    
    .table-show-th {
      .table-show-th-tr {
        border: 1px solid #E9E9E9;
        border-width: 1px 0;
        .table-show-th-td{
          color: #888;
          height: 40px;
          line-height: 40px;
        }

        .table-show-th-td0 {
          width: 40px;
        }
        .table-show-th-td1 {
          width: 74px;
        }
        .table-show-th-td2 {
          width: 192px;
        }
        // .table-show-th-td3 {

        // }
        .table-show-th-td4 {
          width: 100px;
        }
        .table-show-th-td5 {
          width: 82px;
        }
        .table-show-th-td6 {
          width: 70px;
        }
        .table-show-th-td7 {
          width: 70px;
        }
      }
    }
    .table-show-tb {
      .table-show-tb-tr {
        border: 1px solid #E9E9E9;
        border-width: 0 0 1px 0;
        .table-show-tb-td{
          font-size: 14px;
          height: 40px;
          line-height: 40px;
          overflow: hidden; 
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .table-show-tb-td0 {
          .table-show-tb-index{
            text-align: center;
            display: inline-block;
            width: 17px;
            height: 17px;
            line-height: 17px;
            color: #fff;
            background-color: #999999;
            margin-left: 6px;
            font-size: 13px;
          }
          .table-show-tb-index0 {
            background-color: #FC7403;
          }
          .table-show-tb-index1 {
            background-color: #F79415;
          }
          .table-show-tb-index2 {
            background-color: #FFA95E;
          }
        }
        .table-show-tb-td1 {
          color: #888;
        }
        // .table-show-tb-td2 {

        // }
        .table-show-tb-td3, .table-show-tb-td3 a{
          color: #666;
          font-size: 13px;
        }
        .table-show-tb-td3 a:hover{
          color: $base-color;
        }
        .table-show-tb-td4 {
          color: #888;
          font-size: 13px;
        }
        .table-show-tb-td5 {
          color: #999;
          font-size: 13px;
        }
        .table-show-tb-td6 {
          font-size: 11px;
          color: #999;
        }
        .table-show-tb-td7 {
          font-size: 11px;
          color: #999;
        }
      }
    }
  }
}
</style>